import { Link } from '@brillout/docpress'
import { ImplementedBy } from '../../components'
import { UiFrameworkExtension } from '../../components'

Environment: client.
<ImplementedBy by={<UiFrameworkExtension name list={['vike-react', 'vike-vue']}/>} noCustomGuide={true}>`onBeforeRenderClient()`</ImplementedBy>

Hook called at the beginning of rendering the page on the client-side. It's usually used for integrating tools, such as state management tools.

It's called upon rendering the first page (e.g. <Link href="/hydration">hydration</Link> when using <Link href="/ssr">SSR</Link>) and upon page navigation.

> If you want to perform an action only upon hydration then use <Link href="/pageContext#:~:text=pageContext.isHydration">`pageContext.isHydration`</Link>:
>
> ```js
> // +onBeforeRenderClient.js
>
> export function onBeforeRenderClient(pageContext) {
>   if (pageContext.isHydration) {
>     // ...
>   }
> }
> ```

It's called by `vike-{react,vue}` at the beginning of its <Link href="/onRenderClient">`onRenderClient()`</Link> implementation.

## See also

- <Link href="/onAfterRenderClient"/>
- <Link href="/onRenderClient"/>
- <Link href="/onHydrationEnd" />
- <Link href="/hooks"/>
